<template>
  <div class="attendances-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 头部区域 -->
        <tree-tools
          :tree-node="company"
          :is-root="true"
          @add-depts="addDepts"
        />

        <!-- 树形结构 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <tree-tools
            slot-scope="{ data }"
            :tree-node="data"
            @del-depts="getDepartments"
            @add-depts="addDepts"
            @edit-dept="editDepartments"
          />
        </el-tree>

        <!-- 弹出框 -->
        <add-dept
          ref="dept"
          :tree-data="treeData"
          :show-dialog="showDialog"
          :list="list"
          @close-dialog="showDialog = false"
          @add-dept="getDepartments"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { tranListToTreeData } from '@/utils'
import addDept from './components/add-dept.vue'
import treeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
export default {
  name: 'Departments',
  components: { treeTools, addDept },
  data() {
    return {
      company: {},
      defaultProps: {
        label: 'name'
      },
      departs: [],
      // 弹出框
      showDialog: false,
      treeData: {},
      list: []
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const res = await getDepartments()
      this.departs = tranListToTreeData(res.data.depts, '')
      // console.log(this.departs, '000')
      this.list = res.data.depts
      this.company = { name: res.data.companyName, manager: '负责人', id: '' }
      // console.log(res)
    },
    // 新增
    addDepts(data) {
      this.showDialog = true
      this.treeData = data
      // console.log(data)
    },
    // 编辑
    editDepartments(data) {
      this.showDialog = true
      this.treeData = data
      this.$nextTick(() => {
        this.$refs.dept.getDepartmentDetail()
      })
    }
  }
}
</script>
<style scoped>
</style>
